<!--
 * @Description: 登录
 * @Version: 1.0
 * @Autor: ray
 * @Date: 2022-03-09 13:53:51
 * @LastEditors: ray ray.chin@163.com
 * @LastEditTime: 2024-06-19 16:30:54
-->
<template>
    <view class="main">
        <view class="content">
            <view class="title" @click="openLog()">登录</view>
            <view class="input-root">
                <view class="label">账号</view>
                <input
                    class="input"
                    v-model="username"
                    placeholder-style="color:#666;font-size:34rpx"
                    placeholder="请输入账号"
                />
            </view>
            <view class="input-root">
                <view class="label">密码</view>
                <input
                    class="input"
                    v-model="password"
                    password
                    placeholder-style="color:#666;font-size:34rpx"
                    placeholder="请输入密码"
                />
            </view>
            <view class="input-root" v-show="needValidate">
                <view class="label">验证码</view>
                <input
                    class="input"
                    v-model="captcha"
                    placeholder-style="color:#666;font-size:34rpx"
                    placeholder="请输入验证码"
                />
                <image v-if="imgPath" class="img" :src="imgPath" @click="getCaptcha()" />
            </view>

            <view class="button" @click="checkFormat()">登 录</view>
        </view>
    </view>
</template>
<script>
import { loginWithPassword } from "@/utils/login.js";
import { logger } from "@/utils/logger.js";
export default {
    components: {},
    mixins: [logger],
    data() {
        return {
            username: "",
            password: "",
            key: "",
            captcha: "",
            imgPath: "",
            debugCount: 0,
            needValidate: false,
        };
    },

    async created() {
    },
    onReady() {
        if (this.needValidate) {
            this.getCaptcha();
        }
        if (process.env.NODE_ENV === "development") {
            this.username = "test";
            this.password = "te@st123";
        }
    },
    onShow() {},
    onHide() {},
    methods: {
        checkFormat() {
            if (!this.username) {
                uni.showToast({
                    title: "请输入账号",
                    icon: "none",
                });
                return;
            }
            if (!this.password) {
                uni.showToast({
                    title: "请输入密码",
                    icon: "none",
                });
                return;
            }
            if (this.needValidate && !this.captcha) {
                uni.showToast({
                    title: "请输入验证码",
                    icon: "none",
                });
                return;
            }

            this.login();
        },
        async getCaptcha() {
            let res = await this.$api.getCaptcha({});
            this.imgPath = res.data.verCode;
            this.key = res.data.key;
            console.log(res, 'getCaptcha');
        },
        async login () {
            uni.showLoading({ title: "登录中", mask: true });
            let res = await loginWithPassword(this.username, this.password);
            if (res.success) {
                uni.redirectTo({
                    url: "/pages/index/index",
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
uni-page-body {
    width: 100vw;
    overflow: hidden;
    background: #fff;
}
.main {
    height: 100%;
    width: 100%;
    background: linear-gradient(#ffffff, #E6E6FA);
    position: relative;
    .content {
        // height: 100%;
        // display: flex;
        // flex-direction: column;
        position: absolute;
        top: 25%;
        width: 100%;
        justify-content: center;
        // align-items: center;
        padding: 10rpx 40rpx;
        .title {
            color: #444444;
            width: 100%;
            text-align: center;
            font-size: 34rpx;
            margin-top: 10rpx;
            padding: 20rpx 10rpx;
            font-weight: 600;
        }
        .input-root {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 10rpx;
            padding: 20rpx;
            border-bottom: 0.5rpx solid #e5e5e5;
            position: relative;
            .label {
                display: none;
                width: 140rpx;
                text-align: left;
                color: #666666;
                font-size: 30rpx;
                margin-right: 10rpx;
            }
            /deep/ uni-input {
                flex: 1;
            }
            /deep/ .uni-input-input {
                color: #666666;
                font-size: 30rpx;
            }
            /deep/ .uni-input-placeholder {
                color: #999999;
                font-size: 30rpx
            }

            .img {
                height: 60rpx;
                width: 150rpx;
                position: absolute;
                top: 0;
                right: 30rpx;
                // left: 0;
                bottom: 0;
                margin: auto;
            }
        }

        .button {
            margin-top: 50rpx;
            width: 100%;
            text-align: center;
            padding: 20rpx;
            color: white;
            font-size: 32rpx;
            background-color: #4788ee;
            border-radius: 10rpx;
        }
    }
}
</style>
